<template>
  <h1>情况三：监视 reactive 定义的【对象类型】数据，且默认开启了深度监视</h1>
  <div class="person">
    姓名: {{ person.name }}
    年龄: {{ person.age }}
    <hr>
    <button @click="changeName">改变姓名</button>
    <button @click="changeAge">改变年龄</button>
    <button @click="changePerson">改变人物</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';

let person = reactive({
  name: '小灿同学',
  age: 25
})

function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changePerson() {
  Object.assign(person, {
    name: '小灿同学哈哈哈',
    age: 123
  })
}

/**
 * 监视 情况三： reactive 定义的【对象类型】数据，且默认开启了深度监视  隐式创建深度监听
 */
watch(person, (newVal, oldVal) => {
  console.log('sum变化了,');
  console.log('sum变化了,新的值是:', newVal);
  console.log('旧的值是:', oldVal);
})
</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>